<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div class="input-group ${cssClass}"
     th:fragment="treeDialog (id, name, labelName, nameVal, labelVal, cssClass, placeholder, dialogTitle, remoteUrl, always, allowSelectRoot)">

    <input th:id="${id}+'_id'" th:name="${name}" th:value="${nameVal}" type="hidden"/>
    <input th:id="${id}+'_name'" th:name="${labelName}" th:value="${labelVal}" readonly="readonly" type="text"
           class="form-control" th:classappend="${cssClass}" th:attr="placeholder=${placeholder}"/>
    <span class="input-group-btn">
        <a th:id="${id}+'_button'" class="btn blue" data-toggle="modal" th:href="'#' + ${id}+'_tree_div'">选择</a>
    </span>

    <div th:id="${id}+'_tree_div'" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-wide">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" th:text="${dialogTitle}">Responsive</h4>
                </div>
                <div class="modal-body">
                    <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
                        <div class="row">
                            <ul th:id="${id}+'_menuTree'" class="ztree" style="margin-top:0; overflow-x: auto;"></ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn default">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <th:block th:if="${always}">
        <link th:href="@{/assets/plugins/jquery-ztree/3.5.24/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet"
              type="text/css"/>
        <script type="text/javascript"
                th:src="@{/assets/plugins/jquery-ztree/3.5.24/js/jquery.ztree.core.min.js}"></script>
    </th:block>
    <script>

        var allowSelectRoot = Boolean("[[${allowSelectRoot}]]");

        $.get("[[@{${remoteUrl}}]]", function (data) {
            var setting = {
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onDblClick: onDblClick
                }
            };


            function onDblClick(event, treeId, treeNode) {
                if (allowSelectRoot && treeNode.id != 1) {
                    $("#" + "[[${id}]]" + "_id").val(treeNode.id);
                    $("#" + "[[${id}]]" + "_name").val(treeNode.name);
                    $("#" + "[[${id}]]" + "_tree_div").modal('hide');
                } else {
                    $("#" + "[[${id}]]" + "_id").val(treeNode.id);
                    $("#" + "[[${id}]]" + "_name").val(treeNode.name);
                    $("#" + "[[${id}]]" + "_tree_div").modal('hide');
                }
            }

            var initMenuTree  = function (data) {
                var $zTree = $.fn.zTree.init($("#" + "[[${id}]]" + "_menuTree"), setting, data);
                // 默认展开一级节点
                var nodes = $zTree.expandAll(true);
            }(data);

        });



    </script>
</div>

</body>
</html>
